<template>
  <div class="detailContainer">
    <div class="content">
      <div class="left">
        <!-- 标题 -->
        <h1 class="title">微小说|人贩子？</h1>
        <!-- 头部 -->
        <div class="user">
          <!-- 头像 -->
          <img class="head" src="../../assets/logo.png" />
          <div class="userInfo">
            <div class="top">
              <div class="userName">我在人间捡故事_</div>
              <img
                src="https://upload.jianshu.io/user_badge/19c2bea4-c7f7-467f-a032-4fed9acbc55d"
              />
              <button>关注</button>
            </div>
            <div class="bottom">
              <img class="head" src="../../assets/logo.png" />
              <span class="color">23</span>
              <span>2021.06.09</span>
              <span>12:08:21</span>
              <span>字数 346</span>
              <span>阅读 2,571</span>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="detail">
          <p>&nbsp;光头男人胳膊上纹着花臂，拉着一个正在哭闹的小孩。</p>
          <p>&nbsp;路人见状议论纷纷，“这不是人贩子吧？要不我们报警？”</p>
          <p>&nbsp;几名热心大妈拦住男人，“这小孩不是你孩子吧？”</p>
          <p>&nbsp;男人瞪大眼睛，“怎么？你认识？”</p>
          <p>&nbsp;“呀，那你不会是人贩子吧？保安！保安这有拐卖小孩的！”</p>
          <p>&nbsp;人越聚越多们围住男人。</p>
          <p>
            &nbsp;
            “大姐，我可不是人贩子啊！我就是在厕所旁发现这小孩哇哇大哭，说他找不到妈妈了，我这不带他找来了吗？你看，这到处都是监控，我咋可能是人贩子啊？”
          </p>
          <p>
            &nbsp;
            这时孩子母亲从人群中冲出来，“儿子，可算找到你了以后不许瞎跑了！”
          </p>
          <p>&nbsp; “这位大哥谢谢你啊，要不是你，我家孩子就跑丢了。”</p>
          <p>&nbsp; 男人摸摸光秃秃的脑门，“不客气不客气。”</p>
          <p>
            &nbsp; 刚刚嚷嚷的大妈有些不好意思，“大兄弟，我就是看你光头又纹身像…”
          </p>
          <p>
            &nbsp;
            “没事大姐，就是我这头发它秃，我就剃了光头，这纹身嘛，我是个纹身师，嘿嘿。”
          </p>
          <hr />
          <div class="more">更多精彩内容，就在简书APP</div>
        </div>
      </div>
      <div class="right">
        <!-- 轮播图 -->
        <Carsousel></Carsousel>
        <div class="recommendContent">
          <!-- 作者 -->
          <div class="recommendAuthor">
            <a href="">
              <img src="./images/author.webp" />
            </a>
            <div class="top">
              <p>南方姑娘谭檬</p>
            </div>
            <img
              class="level"
              src="https://upload.jianshu.io/user_badge/19c2bea4-c7f7-467f-a032-4fed9acbc55d"
            />
            <button>关注</button>
            <div class="bottom">总资产7,746</div>
          </div>
          <!-- 文章 -->
          <ul class="recommendArticle">
            <li class="article">
              <a href="">只有一种人，可以不用结婚</a>
              <p>阅读4,689</p>
            </li>
            <li class="article">
              <a href="">只有一种人，可以不用结婚</a>
              <p>阅读4,689</p>
            </li>
            <li class="article">
              <a href="">只有一种人，可以不用结婚</a>
              <p>阅读4,689</p>
            </li>
          </ul>
        </div>
        <!-- 推荐阅读 -->
        <div class="recommendList">
          <div class="line"></div>
          <h3>推荐阅读</h3>
          <ul>
            <li class="item">
              <a href="">找一个，自己真正喜欢的人</a>
              <p>阅读1,037</p>
            </li>
            <li class="item">
              <a href="">只有一种人，可以不用结婚</a>
              <p>阅读4,689</p>
            </li>
            <li class="item">
              <a href="">只有一种人，可以不用结婚</a>
              <p>阅读4,689</p>
            </li>
            <li class="item">
              <a href="">一个人值不值得爱，只需要问问自己</a>
              <p>阅读4,689</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detail",
};
</script>

<style scoped>
/* 容器 */
.detailContainer {
  background-color: #f9f9f9;
}
.content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 66px);
  padding-top: 10px;
  font-size: 16px;
}
/* 左侧内容区 */
.content .left {
  flex-shrink: 0;
  margin-bottom: 24px;
  margin-right: 10px;
  width: 730px;
}
.content .left .title {
  font-size:26px;
  font-weight: 700;
  margin: 20px 0;
}
.content .left .user {
  display: flex;
  margin-bottom: 32px;
}
.content .left .user .head {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  margin-right: 10px;
}
.content .left .user .userInfo .top {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  color: inherit;
}
.content .left .user .userInfo .top img {
  width: 16px;
  height: 16px;
  margin: 0 8px;
}
.content .left .user .userInfo .top button {
  color: #ec7259;
  background-color: #fdf1ee;
  border-color: #ec7259;
  border-radius: 15px;
}
/* 发布信息 */
.content .left .user .userInfo .bottom {
  font-size: 13px;
}
.content .left .user .userInfo .bottom .color {
  color: #ec7259;
}
.content .left .user .userInfo .bottom span {
  margin-right: 8px;
}
.content .left .user .userInfo .bottom .head {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  display: inline-block;
  background-color: #f9f9f9;
}
/* 文章 */
.content .left .detail {
  line-height: 1.8;
  width: 100%;
}
/* 文章底部 */
.content .left .more {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
/* 右侧内容区 */
.content .right {
  width: 260px;
  height: 1000px;
  /* background-color: rgb(201, 200, 200); */
}
.recommendContent {
  width: 100%;
  background-color: #fff;
  padding: 16px;
  margin-top: 25px;
}
.recommendAuthor {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.recommendAuthor img {
  display: block;
  border-radius: 50%;
  border: 1px solid #eee;
  width: 45px;
  height: 45px;
}
.recommendContent .recommendAuthor .add {
  float: left;
}

.recommendAuthor .top p {
  font-size: 13px;
}
.recommendContent .recommendAuthor .level {
  display: inline;
  width: 16px;
  height: 16px;
}
.recommendAuthor button {
  padding: 2px 12px;
  font-size: 12px;
  color: #ec7259;
  background-color: #fff;
  border: 1px solid #ec7259;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  white-space: nowrap;
}
.recommendAuthor .bottom {
  color: #969696;
  font-size: 12px;
}
.recommendArticle .article {
  line-height: 1.5;
  margin-bottom: 5px;
}
.recommendArticle .article a {
  font-size: 14px;
}
.recommendArticle .article p {
  font-size: 12px;
  color: #999;
}
.recommendList {
  width: 100%;
  background-color: #fff;
  margin-top: 25px;
  padding: 16px;
}
.recommendList .line {
  float: left;
  background-color: #ec7259;
  width: 3px;
  height: 16px;
  margin-right: 8px;
}
.recommendList ul {
  margin-top: 18px;
}
.recommendList .item {
  line-height: 1.5;
  margin-bottom: 15px;
}
.recommendList .item a {
  font-size: 14px;
}
.recommendList .item p {
  font-size: 12px;
  color: #999;
}
</style>
